<template>
  <div>
    <div class="center">
      <textarea v-model="content" maxlength="200" class="textarea" :style="{width: textareaWidth,height: textareaHeight,marginTop: textareaMarginTop,paddingTop: textareaPaddingTop,paddingLeft: textareaPaddingLeft,paddingRight: textareaPaddingRight}"  @input="descInput" placeholder="请输入你的建议"></textarea>
      <span class="span" :style="{fontSize: spanFontSize,left: spanLeft,top: spanTop}">{{remnant}}/200</span>   
    </div>  
      <div class="center"><mt-button class="n-lecturers-button" :style="{width: nLecturersButtonWidth,height: nLecturersButtonHeight, fontSize: nLecturersButtonFontSize}" type="default" v-on:click="submit">提交</mt-button></div>
  </div>      
</template>

<script>
  import { submitAdvice } from '@/api/lecturerAdvice'
  import { MessageBox } from 'mint-ui'
  export default {
    data () {
      return {
        content: '',
        remnant: 0,
        listQuery: {
          content: this.content
        }
      }
    },
    created () {

    },
    filter: {

    },
    computed: {
      textareaWidth () {
        return this.clientWidth * 690 / 750 + 'px'
      },
      textareaHeight () {
        return this.clientWidth * 363 / 750 + 'px'
      },
      textareaMarginTop () {
        return this.clientWidth * 30 / 750 + 'px'
      },
      textareaPaddingTop () {
        return this.clientWidth * 28 / 750 + 'px'
      },
      textareaPaddingLeft () {
        return this.clientWidth * 28 / 750 + 'px'
      },
      textareaPaddingRight () {
        return this.clientWidth * 30 / 750 + 'px'
      },
      nLecturersButtonWidth () {
        return this.clientWidth * 118 / 750 + 'px'
      },
      nLecturersButtonHeight () {
        return this.clientWidth * 54 / 750 + 'px'
      },
      nLecturersButtonFontSize () {
        return this.clientWidth * 28 / 750 + 'px'
      },
      spanFontSize () {
        return this.clientWidth * 24 / 750 + 'px'
      },
      spanLeft () {
        return this.clientWidth * 776 / 750 + 'px'
      },
      spanTop () {
        return this.clientWidth * 375 / 750 + 'px'
      }
    },
    methods: {
      descInput () {
        this.remnant = this.content.length
      },
      submit () {
        if (this.content === undefined || this.content === '') {
          this.$message.error('请输入你的建议')
          return false
        }
        this.listQuery.content = this.content
        submitAdvice(this.listQuery).then(response => {
          if (response.data === 'SUCCESS') {
            MessageBox({
              title: '已提交',
              message: '您的申请已提交,等待培训部审批。'
            })
            var router = this.$router
            router.push('/lecturer')
          }
        })
      }
    }
  }
</script>

<style>
  .textarea{
    resize: none;
  }
  .center{
    text-align: center;
  }
  .span{
      color: #BEBFD7;
      position: absolute;
      z-index: 999;
  }
</style>

